<!--  -->
<template>
  <a-modal
    width="80%"
    title="添加研究中心"
    :visible="visible"
    :footer="null"
    :confirm-loading="confirmLoading"
    @cancel="handleCancel"
  >
    <!-- 研究中心基本信息 -->
    <a-descriptions title="研究中心基本信息"></a-descriptions>
    <a-form-model :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="formRules" ref="formRef">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="选择医院" prop="orgId">
            <a-select @change="handleHospitalSelect" v-model="formData.orgId">
              <a-select-option v-for="item in hospitalList" :key="item.id" :value="item.id">{{
                item.orgName
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="选择科室">
            <a-select
              mode="multiple"
              placeholder="请先选择医院"
              v-model="formData.orgDeptId"
              @change="handleDepartmentChange"
            >
              <a-select-option v-for="item in departmentList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="中心状态">
            <a-select v-model="formData.active">
              <a-select-option v-for="item in $const.RESEARCH_CENTER_STATUS" :key="item.value" :value="item.value">{{ item.desc }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div style="margin-bottom: 20px">
      <a-button type="primary" @click="clickSaveCenter">保存研究中心</a-button>
    </div>
    <!-- 添加研究团队 -->
    <s-table :columns="columns" bordered :data="loadData" :row-key="record => record.id" ref="memberTableRef">
      <template slot="title">
        <div style="display: flex;justify-content:space-between;}">
          <span class="title">研究团队</span>
          <a-button type="primary" icon="plus" :disabled="isAddMember" @click="activeAddCenter()">添加</a-button>
        </div>
      </template>
      <template slot="operate" slot-scope="text, record">
        <a @click="clickView(record)" style="margin-right: 10px">查看</a>
        <a-popconfirm title="是否确认取消邀请？" @confirm="clickCancel(record)">
          <a v-if="record.status === 1" style="margin-right: 10px">取消</a>
        </a-popconfirm>
        <a-popconfirm title="是否确认移出？" @confirm="clickRemove(record)">
          <a v-if="record.status === 2">移出</a>
        </a-popconfirm>
      </template>
    </s-table>
    <!-- <div style="margin: 20px auto">
      <a-button type="primary" @click="clickSave">保存</a-button>
    </div> -->
    <!-- 团队成员新增弹框 -->
    <AddMemberModal
      ref="addMemberRef"
      :researchId="researchId"
      :modalVisible="modalVisible"
      :hospitalNameProp="hospitalNameProp"
      :departmentListProp="departmentListProp"
      @closeModal="closeModal()" />
  </a-modal>
</template>

<script>
import { memberList, deleteMember, addCenter } from '@/api/overview/member'
import { getOriginationList, getDepartmentList } from '@/api/common'
// import { list } from '@/api/overview/subject'

import AddMemberModal from './AddMemberModal'
const columns = [
  {
    title: '编号',
    key: 'researchNo',
    dataIndex: 'researchNo'
  },
  {
    title: '姓名',
    key: 'userName',
    dataIndex: 'userName'
  },
  {
    title: '职能',
    key: 'roleName',
    dataIndex: 'roleName'
  },
  {
    title: '电话/手机',
    key: 'phone',
    dataIndex: 'phone'
  },
  {
    title: '邮件地址',
    key: 'email',
    dataIndex: 'email'
  },
  {
    title: '邀请状态',
    key: 'status',
    dataIndex: 'status'
  },
  {
    title: '操作',
    key: 'operate',
    scopedSlots: { customRender: 'operate' }
  }
]
export default {
  name: 'AddCenterModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    AddMemberModal
  },
  data () {
    return {
      columns,
      confirmLoading: false,
      modalVisible: false,
      isAddMember: true,
      invitedUserId: '',
      researchId: null, // 传给子组件的研究中心ID
      invitedType: 4, // 传给子组件的被邀请人类型 4为研究中心添加成员
      hospitalNameProp: null, // 传给子组件的选择的医院名字 用于展示
      departmentListProp: null, // 传给子组件的选择科室下拉列表，省的再走一次接口
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      queryParamMember: {
        proId: 1
      },
      dataTable: [],
      formData: {
        proId: this.$route.query.id
      },
      formRules: {
        orgId: [{ required: true, message: '请选择医院', trigger: 'change' }]
      },
      centerList: [],
      hospitalList: [],
      departmentList: [],
      loadData: parameter => {
        // return list(Object.assign(parameter, this.queryParamMember))
        return memberList(Object.assign(parameter, this.queryParamMember)).then(res => {
          this.dataTable = res.content
          return res
        })
      }
    }
  },
  created () {
    this.getHospitalList()
  },
  methods: {
    // 请求医院列表
    getHospitalList () {
      getOriginationList().then(res => {
        this.hospitalList = res // 此行需删掉用下面这行 为方便调试暂时先留着
      })
    },
    // 请求科室列表
    getDepartmentList (val) {
      getDepartmentList({ researchId: val })
        .then(res => {
          this.departmentList = res // 此行需删掉用下面这行 为方便调试暂时先留着
        })
        .catch(() => {})
    },
    // 医院选择下拉改变
    handleHospitalSelect (val) {
      this.getDepartmentList(val)
      this.saveHospitalName(val)
      this.formData.orgDeptId = [] // 将此前选的科室清空
    },
    // 保存选择的医院的名称 用于传给子组件进行展示
    saveHospitalName (val) {
      const obj = this.hospitalList.find(item => item.id === val)
      this.hospitalNameProp = obj.orgName
    },
    // 科室选择改变
    handleDepartmentChange (value) {
      this.formData.orgDeptId = value
    },
    // 点击保存研究中心
    clickSaveCenter () {
      this.$refs.formRef.validate(valid => {
        if (!valid) {
          this.$message.error('必选项未填写完整')
          return false
        }
        this.formData.orgDeptId = this.formData.orgDeptId.toString()
        addCenter({ ...this.formData })
          .then(res => {
            this.$message.success('研究中心新增成功')
            this.departmentListProp = this.departmentList
            this.isAddMember = false
          })
          .catch(() => {})
      })
    },
    // 点击添加成员显示添加对话框
    activeAddCenter () {
      this.modalVisible = true
    },
    // 对话框关闭 根据val判断是取消还是发送了邀请
    closeModal (val = 0) {
      if (val) {
        this.$refs.memberTableRef.refresh(true)
      }
      this.modalVisible = false
    },
    // 点击查看
    clickView (record) {
      console.log('点击了查看')
    },
    // 点击取消
    clickCanlel (record) {
      console.log('点击了取消')
    },
    // 点击移出
    clickRemove (record) {
      console.log('点击了移出')
      deleteMember({ id: record.id })
        .then(res => {
          console.log(res)
          this.$refs.memberTableRef.refresh(true)
        })
        .catch(() => {})
    },
    // 点击取消 取消新增
    handleCancel () {
      this.$emit('completeAdd', false)
      this.resetForm()
    },
    // 处理form和table中的数据
    handleCommitData () {
      this.commitTableData = []
      this.dataTable.forEach(item => {
        const obj = {}
        obj.userId = item.userId
        obj.roleId = item.roleId
        obj.status = item.status
        this.commitTableData.push(obj)
      })
    },
    // 点击确定发送数据
    clickSave () {
      this.$refs.formRef.validate(valid => {
        if (!valid) {
          this.$message.error('必选项未填写完整')
          return false
        }
        this.handleCommitData()
        addCenter()
          .then(res => {
            this.$emit('completeAdd')
            this.resetForm()
          })
          .catch(() => {})
      })
    },
    // 去除校验，重置表单
    resetForm () {
      this.$refs.formRef.resetFields()
      this.formData = {}
    }
  }
}
</script>
<style scoped lang="less">
.title {
  line-height: 32px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
}
</style>
